<template>
    <div class="mentors-detail">
      <back />
      <el-card>
        <template #header>
          <div class="header">
            <div class="header-top">
              <img v-if="user?.avatar" class="avatar" :src="user?.avatar" alt="头像" />
              <img v-else class="avatar" src="@/assets/images/default-avatar.png" alt="头像" />
              <div class="header-top-right m-l-10">
                <div class="header-top-right-info">
                  <div class="flex">
                    <span>{{ user.name }}</span>
                  </div>
                  <div class="m-t-10">
                    <span class="color-gray">学历：</span>
                    <span>{{ user.education }}</span>
                  </div>
                </div>
                <el-button plain type="primary" @click="doContact">联系Ta</el-button>
              </div>
            </div>
            <div class="header-footer">
              <div>
                <span class="color-gray">所在省份：</span>
                <span>{{ user.province }}</span>
              </div>
              <div>
                <span class="color-gray">所在城市：</span>
                <span>{{ user.city }}</span>
              </div>
              <div>
                <span class="color-gray">所在学校：</span>
                <span>{{ user.school }}</span>
              </div>
              <div>
                <span class="color-gray">聘任日期：</span>
                <span>{{ user.hiredate }}</span>
              </div>
              <div>
                <span class="color-gray">研究领域：</span>
                <el-tag
                  class="m-b-10 m-r-10"
                  v-for="(field, index) in user.field"
                  :key="index"
                >
                  {{ field }}
                </el-tag>
              </div>
              <div>
                <span class="color-gray">专业能力：</span>
                <el-tag
                  class="m-b-10 m-r-10"
                  v-for="(ability, index) in user.ability"
                  :key="index"
                >
                  {{ ability }}
                </el-tag>
              </div>
            </div>
          </div>
        </template>
        <div v-html="user.introduction" class="wang-editor-html"></div>
      </el-card>
      <chatDialog ref="chatDialogRef" :user="user" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { getTalentPersonById } from '@/api/talentPerson';
  import back from '@/components/back/index.vue';
  import { onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import chatDialog from '@/components/chat-dialog/index.vue';
  import { ElMessage } from 'element-plus';
  import { getLoginUserId } from '@/utils/storage';
  
  const route = useRoute();
  const user = ref({} as any);
  onMounted(() => {
    const id = route.query.id as string;
    getTalentPersonById(Number(id)).then((res: any) => {
      if (res.code === 200) {
        user.value = res.data;
      }
    });
  });
  
  const chatDialogRef = ref<InstanceType<typeof chatDialog> | null>(null);
  function doContact() {
    if (user.value.id === getLoginUserId()) {
      ElMessage({
        message: '不能将消息发给自己！',
        type: 'error',
      });
      return;
    }
    if (chatDialogRef.value) {
      chatDialogRef.value.dialogFormVisible = true;
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .mentors-detail {
    padding: 20px 100px;
    .header {
      padding: 0 20px;
      &-top {
        display: flex;
        .avatar {
          width: 60px;
          height: 60px;
          object-fit: cover;
        }
        &-right {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      &-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        div {
          width: 48%;
          margin-top: 15px;
        }
      }
    }
  }
  </style>
  